import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { Events } from '@core/services/events/Events';
import { SubjectService } from '@core/services/events/subject.service';
import { ApiService } from '@core/services/http/api.service';

@Component({
  selector: 'formly-field-hr',
  template: `
    <div apes-col [apesMd]="getDivCol()" class="apes-fieldHr-div">
      <apes-form-item style="margin-bottom:0px;">
        <div class="apes-fieldHr-p">
          <div>{{to.label}}</div>
          <div *ngIf="to.hasOwnProperty('tooltipFormatter')"
               class="apes-fieldHr-tooltip"
               apes-tooltip
               [apesTooltipTitle]="tooltipTemplate"
               apesTooltipPlacement="right">
            <ng-template #tooltipTemplate>
              <div style="white-space:pre-line;" [innerHTML]="to.tooltipFormatter"></div>
            </ng-template>
            <i apes-icon apesType="info-circle"></i>
          </div>
        </div>
      </apes-form-item>
    </div>
  `,
  styles: [`
    .apes-fieldHr-div {
      padding: 2px 16px 8px;
      border-bottom: 1px solid #e8e8e8;
    }

    .apes-fieldHr-p {
      font-size: 18px;
      margin: 0;
      font-weight: bold;
      display: flex;
    }

    .apes-fieldHr-tooltip {
      position: relative;
      top: 2px;
      margin-left: 5px;
    }

    .apes-fieldHr-hr {
      border: 0;
      margin: 0;
      background: #e8e8e8;
      height: 1px;
    }
  `],
})
/*界面分隔线*/
export class FormlyFieldHr extends ApesField {
  constructor(protected apiService: ApiService, protected events: Events, protected expressionService: ExpressionService, protected subject: SubjectService) {
    super(apiService, events, expressionService, subject);
  }

  getDivCol() {
    return this.to.col || this.to.divCol || 24;
  }
}

